<template>
    <el-header id="header">
      <div>
        <img
          style="width: 200px; height: 40px; margin: 20px 0 0 -12px"
          src="@/assets/welcome.png"
        />
      </div>
      <div style="margin-top: 20px; display: flex; justify-content: space-between;">
        <div>
        <el-dropdown split-button type="default">
          admin
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">注销</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
        <!-- 
          action 提交的地址
          :show-file-list 是否显示已上传文件列表
           :on-success 上传之后触发的函数
           name 字段名
           accept 上传的文件类型
           :auto-upload 自动上传
        -->
           <div>
        <el-upload
          class="avatar-uploader"
          action="/api/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :auto-upload = "true"
          name="file"
          accept="image/jpg,image/png,image/webp,image/jpeg"
        >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" width="50" />
        </el-upload>
      </div>
  
      </div>
  
     
    </el-header>
  </template>
  <script setup>
  import { ElMessage } from "element-plus";
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  
  const imageUrl = ref('https://cy-dingroom.oss-cn-beijing.aliyuncs.com/2.jpg');
  
  

  
  

  

  </script>
  <style scoped>
  #header {
    max-height: 50px;
    line-height: 50px;
  
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #header > h2 {
    color: #0b67b8;
  }
  </style>
  